<template>
  <h1 class="row-title">折叠面板</h1>
  <div class="row">
    <wl-collapse v-model="openedValue" @change="changeHandle">
      <wl-collapse-item name="a" title="home">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente ducimus odit molestias animi laboriosam
        voluptate similique voluptatibus libero a, hic voluptatem impedit. Similique voluptatum consectetur fuga.
        Explicabo aperiam unde pariatur?
      </wl-collapse-item>
      <wl-collapse-item name="b" title="about">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, eos ea cumque ratione dignissimos illum
        doloribus ipsum id accusamus necessitatibus nam! Corporis nam voluptas dolores officia dolorum quia ea ipsam.
      </wl-collapse-item>
      <wl-collapse-item name="c" title="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci impedit exercitationem earum esse laboriosam
        et non nemo necessitatibus voluptatibus odio optio ipsam asperiores aliquid voluptates neque modi, sunt vero
        nam.
      </wl-collapse-item>
      <wl-collapse-item name="d" title="contact">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nesciunt officia tempora expedita temporibus id?
        Voluptate vero molestias rerum, ducimus, exercitationem maxime culpa maiores harum quos, a voluptates
        consequuntur? Assumenda!
      </wl-collapse-item>
    </wl-collapse>
  </div>
  <h1 class="row-title">手风琴面板</h1>
  <div class="row">
    <wl-collapse accordion v-model="openedValue2" @change="changeHandle">
      <wl-collapse-item name="a" title="home">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente ducimus odit molestias animi laboriosam
        voluptate similique voluptatibus libero a, hic voluptatem impedit. Similique voluptatum consectetur fuga.
        Explicabo aperiam unde pariatur?
      </wl-collapse-item>
      <wl-collapse-item name="b" title="about">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, eos ea cumque ratione dignissimos illum
        doloribus ipsum id accusamus necessitatibus nam! Corporis nam voluptas dolores officia dolorum quia ea ipsam.
      </wl-collapse-item>
      <wl-collapse-item name="c" title="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci impedit exercitationem earum esse laboriosam
        et non nemo necessitatibus voluptatibus odio optio ipsam asperiores aliquid voluptates neque modi, sunt vero
        nam.
      </wl-collapse-item>
      <wl-collapse-item name="d" title="contact">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nesciunt officia tempora expedita temporibus id?
        Voluptate vero molestias rerum, ducimus, exercitationem maxime culpa maiores harum quos, a voluptates
        consequuntur? Assumenda!
      </wl-collapse-item>
    </wl-collapse>
  </div>
  <h1 class="row-title">自定义标题</h1>
  <div class="row">
    <wl-collapse accordion v-model="openedValue3" @change="changeHandle">
      <wl-collapse-item name="a" title="home">
        <template #title>
          <div class="titleContainer">
            <span class="title">Consistency</span>
            <wl-icon icon="house" />
          </div>
        </template>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente ducimus odit molestias animi laboriosam
        voluptate similique voluptatibus libero a, hic voluptatem impedit. Similique voluptatum consectetur fuga.
        Explicabo aperiam unde pariatur?
      </wl-collapse-item>
      <wl-collapse-item name="b" title="about">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam, eos ea cumque ratione dignissimos illum
        doloribus ipsum id accusamus necessitatibus nam! Corporis nam voluptas dolores officia dolorum quia ea ipsam.
      </wl-collapse-item>
      <wl-collapse-item name="c" title="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci impedit exercitationem earum esse laboriosam
        et non nemo necessitatibus voluptatibus odio optio ipsam asperiores aliquid voluptates neque modi, sunt vero
        nam.
      </wl-collapse-item>
      <wl-collapse-item name="d" title="contact">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nesciunt officia tempora expedita temporibus id?
        Voluptate vero molestias rerum, ducimus, exercitationem maxime culpa maiores harum quos, a voluptates
        consequuntur? Assumenda!
      </wl-collapse-item>
    </wl-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const openedValue = ref(['a'])
const openedValue2 = ref(['a'])
const openedValue3 = ref(['a'])
const changeHandle = () => {
  console.log("changed!")
}
</script>

<style lang="scss" scoped>
.titleContainer {
  display: flex;
}

.title {
  margin: 0 5px;
}
</style>
